<template>
	<view v-if="show">
		<view class="goto-tb">
			<view class="content-box">
				<image class="content-bj" src="@/static/images/common/authorize-bg.png"></image>
				<view class="content-head">
					<view class="head-left-img">
						<image class="logo" src="@/static/images/common/app-logo.png" alt="" />
					</view>
					<view class="text">
						<view class="d1" v-if="type == 0">
							即将前往淘宝
						</view>
						<view class="d1" v-if="type == 1">
							即将前往京东
						</view>
						<view class="d1" v-if="type == 2">
							即将前往拼多多
						</view>

						<view class="d2-loading">
							<view class="spinner">
								<view class="bounce1"></view>
								<view class="bounce2"></view>
								<view class="bounce3"></view>
								<view class="bounce4"></view>
								<view class="bounce5"></view>
							</view>
						</view>
					</view>
					<view class="head-right-img">
						<view class="spinner-r"></view>
						<view class="spinner-rs"></view>
						<image
							v-if="type == 0"
							class="logo"
							src="@/static/images/common/taobao-logo.png"
							alt=""
						/>
						<image
							v-if="type == 1"
							class="logo"
							src="@/static/images/common/jd.svg"
							alt=""
						/>
						<image
							v-if="type == 2"
							class="logo"
							src="@/static/icons/pdd.png"
							alt=""
						/>
					</view>
				</view>
				<view class="head-value">
					<view v-if="type == 0">先去淘宝领劵下单</view>
					<view v-if="type == 1">先去京东领劵下单</view>
					<view v-if="type == 2">先去拼多多领劵下单</view>
					<view class="ac">买完回来领取现金补贴</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'ssads',
	data() {
		return {
			show: false,
			type: 0
		};
	},

	props: {
		overlay: {
			type: Boolean,
			default: true
		}
	},
	methods: {
		open({ type }, callback) {
			this.show = true;
			this.type = type;
			if (callback) {
				callback(() => {
					setTimeout(() => {
						this.hide();
					}, 300);
				});
			}
		},
		hide() {
			this.show = false;
		}
	}
};
</script>
<style lang="scss" scoped>
.goto-tb {
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	.content-box {
		width: 476rpx;
		height: 372rpx;
		overflow: hidden;
		font-size: 14rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		z-index: 99999;
		.content-bj {
			width: 476rpx;
			height: 372rpx;
			position: absolute;
			left: 0;
			right: 0;
		}
		.content-head {
			@include flexBox(center, center);
			font-size: 84rpx;
			margin-top: 30rpx;
			.logo {
				width: 84rpx;
				height: 84rpx;
			}
			.head-left-img {
				position: relative;
				width: 84rpx;
				height: 100rpx;
				margin-right: -30rpx;
			}
			.head-right-img {
				position: relative;
				width: 84rpx;
				height: 100rpx;
				left: -20rpx;
				top: -12rpx;
				margin-left: -30rpx;
				image {
					max-width: 100%;
					max-height: 100%;
					border-radius: 50%;
					position: absolute;
					top: 23rpx;
					left: 23rpx;
				}
			}
			.text {
				color: #ffffff;
				font-size: 16rpx;
				width: 220rpx;
				text-align: center;
				.d1 {
					margin-top: -48rpx;
					-webkit-transform: scale(1);
				}
				.d2-loading {
					margin-top: -15rpx;
				}
			}
		}
		.head-value {
			font-size: 24rpx;
			position: absolute;
			bottom: 20rpx;
			left: 0;
			right: 0;
			margin: auto;
			text-align: center;
			.ac {
				margin-top: 15rpx;
				font-size: 28rpx;
				color: #da5372;
			}
		}
	}
}

// css loading代码
.spinner {
	margin: 30rpx auto -30rpx;
	width: 150rpx;
	text-align: center;
}

.spinner > view {
	width: 10rpx;
	height: 10rpx;
	margin: 0 5rpx;
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
	animation: bouncedelay 1.4s infinite ease-in-out;
	/* Prevent first frame from flickering when animation starts */
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
	0%,
	80%,
	100% {
		-webkit-transform: scale(0);
	}
	40% {
		-webkit-transform: scale(1);
	}
}

@keyframes bouncedelay {
	0%,
	80%,
	100% {
		transform: scale(0);
		-webkit-transform: scale(0);
		background-color: rgba(255, 255, 255, 0.6);
	}
	40% {
		transform: scale(1);
		-webkit-transform: scale(1);
		background-color: rgba(255, 255, 255, 1);
	}
}

// 圆圈放大效果
.spinner-r {
	width: 130rpx;
	height: 130rpx;
	margin: 0 auto;
	background-color: #ffffff;
	border-radius: 100%;
	-webkit-animation: scaleout 1.5s infinite ease-in-out;
	animation: scaleout 1.5s infinite ease-in-out;
}
.spinner-rs {
	width: 180rpx;
	height: 180rpx;
	margin: 0 auto;
	background-color: #ffffff;
	position: absolute;
	left: -25rpx;
	top: -25rpx;
	border-radius: 100%;
	-webkit-animation: scaleout 1.5s infinite ease-in-out;
	animation: scaleout 1.5s infinite ease-in-out;
}

@-webkit-keyframes scaleout {
	0% {
		-webkit-transform: scale(0);
	}
	100% {
		-webkit-transform: scale(1);
		opacity: 0;
	}
}

@keyframes scaleout {
	0% {
		transform: scale(0);
		-webkit-transform: scale(0);
	}
	100% {
		transform: scale(1);
		-webkit-transform: scale(1);
		opacity: 0;
	}
}
</style>
